<template>
  <div class="container">
    <el-container>
      <el-aside> <z-menu :isCollapse="isCollapse" /></el-aside>
      <el-container>
        <el-header class="flex flex-between flex-mid">
          <div class="">
            <el-icon color="#052d56" @click="isCollapse = !isCollapse">
              <component :is="isCollapse ? 'expand' : 'fold'"></component>
            </el-icon>
          </div>
          <el-dropdown trigger="hover">
            <el-avatar
              :size="35"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <el-main>
          <z-breadcrumb class="mb-10" />
          <router-view v-slot="{ Component }" class="flex-1 main-content">
            <keep-alive :include="store.state.keepAlive">
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useStore } from "../store";
import ZMenu from "../components/basic/ZMenu.vue";
import ZBreadcrumb from "../components/basic/ZBreadcrumb.vue";
const store = useStore();
const isCollapse = ref(true);
</script>
<style lang="scss" scoped>
.el-container {
  width: 100%;
  height: 100%;
}
.el-aside {
  width: auto;
}
.el-header {
  height: 50px;
  width: 100%;
  padding: 0 10px;
  color: #fff;
  .el-icon,
  svg {
    width: 1.3em;
    height: 1.3em;
  }
}
.el-main {
  padding: 10px;
  background-color: #ededed;
  display: flex;
  flex-direction: column;
}
</style>
<style lang="scss">
.el-popper {
  :deep(.is-light) {
    border: none !important;
  }
}
</style>
